<template>
  <div class="for">
      <div class="msg">
          <img :src="img">
      </div>
        <p class="p1">{{name}}</p>
        <h1 class="h" >{{count}}</h1>
  </div>
  
</template>

<script>
export default {
props:['index','name','img',"count"],
}
</script>

<style>
        .for{
            margin-left: 20px;
            width: 265px;
            height: 121px;
            background-color: rgb(255, 255, 255);
            float: left;
            border-radius: 6px;
        }
        .msg{
            width: 55px;
            height: 55px;
            background-color: dodgerblue;
            float: left;
            margin-left: 34px;
            margin-top: 35px;
            border-radius: 50px;
            box-shadow:4px 4px 5px rgb(160, 160, 160);
        }
        .msg img {
            margin-left: 20px;
            margin-top: 20px;
            width: 16px;
            height: 16px;
        }
        .h{
            margin-top: 10px;
            margin-left: 105px;
            color: dodgerblue;
        }
        .p1{
            margin-top: 30px;
            margin-left: 100px;
            color: #999999;
        }
</style>